<template>
  <div class="mb-2">
    <div class="float-left">
      <slot name="tableHeader" :selected-list="selectedList" :selected-list-ids="selectedListIds" :is-selected="isSelected" />
    </div>
    <div class="float-end">
      <slot name="toolButton">
        <el-tooltip v-if="showToolButton('refresh')" effect="light" content="刷新" placement="top">
          <el-button :disabled="disabledButton?.includes('refresh')" icon="Refresh" circle @click="emits('refresh')" />
        </el-tooltip>
        <el-tooltip v-if="showToolButton('setting') && columns.length" effect="light" content="列配置" placement="top">
          <el-button :disabled="disabledButton?.includes('setting')" icon="Operation" circle @click="emits('colSetting')" />
        </el-tooltip>
        <el-tooltip v-if="showToolButton('search') && showSearch" effect="light" content="隐藏搜索" placement="top">
          <el-button :disabled="disabledButton?.includes('search')" icon="Search" circle @click="emits('search')" />
        </el-tooltip>
      </slot>
    </div>
  </div>
</template>

<script lang="ts" setup name="TableHeader">
import { EcoDialogFormProps } from '@/components/EcoDialogForm/index.vue'

export interface HeaderProps {
  columns: EcoTable.Column[]
  toolButton?: ('refresh' | 'setting' | 'search')[] | boolean
  disabledButton?: ('refresh' | 'setting' | 'search')[]
  selectedList: Record<string, any>[] // 选择的数据
  selectedListIds: string[] // 选择的数据 ID
  isSelected: boolean // 是否选中过数据
  showSearch: boolean // 是否展示搜索按钮
  dialogForm?: EcoDialogFormProps // 新增、编辑、删除表单配置
}
const props = defineProps<HeaderProps>()

const showToolButton = (key: 'refresh' | 'setting' | 'search') => {
  return Array.isArray(props.toolButton) ? props.toolButton.includes(key) : props.toolButton
}
type TableMainHeaderEmits = {
  add: []
  removeBatch: []
  refresh: []
  colSetting: []
  search: []
  export: []
}

const emits = defineEmits<TableMainHeaderEmits>()
</script>
<style lang="scss" scoped></style>
